<template>
    <div class="backstage">
        <el-container>
            <!-- 头部 -->
            <el-header >
                <div class="header">
                    <div class="avatar">
                        <el-avatar shape="circle" :size="80" fit="contain" :src="url">
                        </el-avatar>
                    </div>
                    <div class="uname">
                        <h6>管理员：{{username}}</h6>
                    </div>
                    <div class="title">
                        <h1>瓜夕夕后台管理</h1>
                    </div> 
                    <div class="other">
                        <h4>服务热线:888-888888</h4>
                        <el-button @click="logout" v-if="isalogin">退出登录</el-button>
                        <el-button @click="login" v-else>登录</el-button>
                    </div>  
                </div>
            </el-header>
            <!-- 左侧导航 -->
            <el-divider></el-divider>
            <el-container>
                <el-aside class="aside" width="140px">
                    <el-menu router class="elmenu" mode="vertical" default-active="color">
                        <el-menu-item   index="user"><i class="el-icon-menu"></i>用户情况</el-menu-item>
                        <el-menu-item   index="commodity"><i class="el-icon-document"></i>商品情况</el-menu-item>
                        <el-menu-item  index="order"><i class="el-icon-message-solid"></i>订单情况</el-menu-item>
                        <el-menu-item index="seeding"><i class="el-icon-platform-eleme"></i>开启直播</el-menu-item>
                        <el-menu-item index="weal"><i class="el-icon-menu"></i>客服</el-menu-item>
                    </el-menu>    
                </el-aside>

                <!-- 内容 -->
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
  data() {
    return {
      fit: "",
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      isalogin:sessionStorage.getItem("isalogin"),
      username:sessionStorage.getItem("ausername")
    };
  },
  methods: {
      logout(){
        this.$socket.emit("disweal",{
            aname:this.$store.state.ausername
        })
        sessionStorage.clear()
        window.location.reload()
        },
      login(){
        this.$router.push("/alogin")
      }
  },
  sockets:{

  },
  mounted() {
      this.$socket.emit("weallist",{
          user:this.$store.state.ausername,
      })
  },
};
</script>

<style>
.backstage {
  width: 1200px;
  margin: 0 auto;
}
.el-divider {
  margin: 24px 0 0 0 !important;
}
.header {
  width: 100%;
  display: flex;
}
.el-avatar {
  width: 70px !important;
  height: 70px !important;
  margin: 5px 0 0 20px;
}
.uname {
  width: 180px;
  height: 80px;
  margin-left:3%;
  font-size: 20px;
  font-weight: bold;
  line-height: 80px;
}
.title {
  width: 800px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  font-size: 30px;
  font-weight: bold;
}
.other {
  width: 200px;
  height: 80px;
  line-height: 40px;
}
.aside {
  height: 685px;
  border-right: 1px solid rgb(184, 186, 189);
}
</style>

